<template>
    <div class="addContract">
        <div>
            <van-cell-group style="text-align:left">
                <van-field v-model="form.fcontractcode" label="合同编码:" readonly label-class='fw'/>
                <van-cell title-class='fw' is-link title="合同日期:" :value="form.fcontractdate" @click="showTimeClick"/>
                <van-popup v-model="showTime" get-container="body" position='bottom'>
                    <van-datetime-picker
                        v-model="currentDate"
                        type="date"
                        :formatter="formatter"
                        @confirm='timeConfirm'
                        @cancel='timecancel'
                    />
                </van-popup>
                <van-cell title-class='fw'  is-link title="委托单位:" :value="form.fdeptname" @click="showFdeptClick"/>
                <van-popup 
                    v-model="showFdept" 
                    get-container="body" 
                    position='bottom'
                >
                    <van-picker 
                        title='请选择委托单位' 
                        :columns="columns"
                        show-toolbar
                        value-key='fname'
                        @cancel="onCancel4fdeptname"
                        @confirm="onConfirm4fdeptname"
                     />
                </van-popup>
                <van-field label-class='fw' v-model="form.fdeptadd_cus" label="委托单位地址:" />
                <van-field label-class='fw' type="tel" v-model="form.fdepttel_cus" label="委托单位电话:" />
                <van-field label-class='fw' type="number" v-model="form.fdeptzipcode_cus" label="委托单位邮编:" />
                <van-field  label-class='fw' v-model="form.fdepperson_cus" label-width='120px' label="委托单位经手人:" />
                <van-field label-class='fw' type="tel" v-model="form.fdeppersonmob_cus" label-width='160px' label="委托单位经手人联系电话:" />
            </van-cell-group>
        </div>
        <div class='faddContractFooter' v-if="state !='view'">
            <div class='leftBtn4addContract' @click="save">保存</div>
        </div>
    </div>
</template>

<script>
import {
    edit
    ,insert
    ,searchmaxcode
    ,searchforwx
    ,searchbyid
    ,submit
} from '@/api/addContract'
import { 
    Field
    ,DatetimePicker
    , Popup
    ,Cell
    ,CellGroup
    ,Picker
    ,Toast
} from 'vant';
export default {
    name: 'addContract',
    components: {
        [Cell.name]:Cell,
        [CellGroup.name]:CellGroup,
        [Field.name]:Field,
        [DatetimePicker.name]:DatetimePicker,
        [Popup.name]:Popup,
        [Picker.name]:Picker,

    },
    created(){
        this.state = this.$route.query.state
        
       
        if(this.state == 'add'){
            this.getCode()
            this.searchColumns()
        }else if(this.state == 'edit'){
            this.form.fcontractid = this.$route.query.fcontractid
            this.form.fcontractid = 9
            this.getEdit(this.form.fcontractid)
        }else if(this.state == 'view'){
            this.form.fcontractid = this.$route.query.fcontractid
            this.form.fcontractid = 9
            this.getEdit(this.form.fcontractid)
        }
        
    },
    data () {
        return {
            state:'',
            text:'',
            minDate: new Date(2020, 0, 1),
            maxDate: new Date(2025, 10, 1),
            currentDate: new Date(),
            showTime:false,
            showFdept:false,
            form:{
                fcontractid:'',
                fcontractcode:'',
                fcontractdate:'',
                fdeptid_cus:'',
                fdeptadd_cus:'',
                fdepttel_cus:'',
                fdepperson_cus:'',
                fdeptzipcode_cus:'',
                fdeppersonmob_cus:'',
                fcrdate:'',
                fdeptname:'',
                fuserid:'3e4d37ea-cfea-4ec6-98eb-a651c2df4fd7',
                fuseridwx:'o42mZxHZdK2AmdKvC4ECvzExXaaY',
                fisstate:0,
                fisstatename:''
            },
            columns: [
                { text: '客户一',id:'c5f0d33b-ac05-4acd-b8bb-a01226565543'},
                { text: '单位二' },
                { text: '单位三' }
            ],
 
          
        }
    },
    methods:{
        searchColumns(){
            searchforwx().then(res=>{
                if(res.isSuccess){
                    this.columns = res.rows.filter(function(value) {return value.fstate ==1;})
                }
            })
        },
        getEdit(fcontractid){
            searchbyid({
                fcontractid:fcontractid
            }).then(res=>{
                console.log(res)
               
                this.form.fcontractid = res.map.fcontractid
                this.form.fcontractcode = res.map.fcontractcode
                this.form.fcontractdate = res.map.fcontractdate
                this.form.fdeptid_cus = res.map.fdeptid_cus
                this.form.fdeptadd_cus = res.map.fdeptadd_cus
                this.form.fdepttel_cus = res.map.fdepttel_cus
                this.form.fdepperson_cus = res.map.fdepperson_cus
                this.form.fdeptzipcode_cus = res.map.fdeptzipcode_cus
                this.form.fdeppersonmob_cus = res.map.fdeppersonmob_cus
                this.form.fcrdate = res.map.fcrdate
                this.form.fisstatename = res.map.fisstatename
                this.form.fisstate = res.map.fisstate
               // this.form.fdeptname = res.map.fdeptname
                this.form.fuserid ='3e4d37ea-cfea-4ec6-98eb-a651c2df4fd7',
                this.form.fuseridwx = 'o42mZxHZdK2AmdKvC4ECvzExXaaY',
                this.fisstate = res.map.fisstate
                this.fisstatename = res.map.fisstatename
                searchforwx().then(resp=>{
                    if(resp.isSuccess){
                        this.columns = resp.rows.filter(function(value) {return value.fstate ==1;})
                        console.log(this.columns)
                        if(this.state!='add'){
                            this.columns.forEach(el=>{
                                if(el.fid ==  this.form.fdeptid_cus ){
                                    this.form.fdeptname = el.fname
                                }
                            })
                        }
                    }
                })
            })
        },
        formatter(type, val) {
            if (type === 'year') {
                return `${val}年`;
            } else if (type === 'month') {
                return `${val}月`
            } else if (type === 'day') {
                return `${val}日`
            }
            return val;
        },
 
        save(){
            let data = new Date()
            this.form.fcrdate = this.dateToString(data)
            if(this.state == 'add'){
                insert(this.form).then(res=>{
                    if(res.isSuccess){
                        Toast('保存成功');
                        this.$router.push({path:"/"});
                    }
                })
            }else if(this.state == 'edit'){ 
                edit(this.form).then(res=>{
                    if(res.isSuccess){
                        Toast('修改成功');
                        this.$router.push({path:"/"});
                    }
                })
            }
 
        },
        getCode(){
            searchmaxcode({}).then(res=>{
                if(res.isSuccess){
                    this.form.fcontractcode = res.object
                }
            })
        },
        showTimeClick(){
            this.showTime = true
        },
        timeConfirm(val){
            this.form.fcontractdate = this.dateToString(val)
            this.showTime = false
        },
        timecancel(){
            this.showTime = false
        },
        showFdeptClick(){
            this.showFdept = true
        },
        onCancel4fdeptname(val){
            this.showFdept = false
        },
        onConfirm4fdeptname(val){
            console.log(val)
            this.form.fdeptname = val.fname
            this.form.fdeptadd_cus = val.faddress
            this.form.fdeptid_cus = val.fid
            this.form.fdepttel_cus = val.fphone
            this.showFdept = false
        },
        dateToString(date){ 
            var year = date.getFullYear(); 
            var month =(date.getMonth() + 1).toString(); 
            var day = (date.getDate()).toString();  
            if (month.length == 1) { 
                month = "0" + month; 
            } 
            if (day.length == 1) { 
                day = "0" + day; 
            }
            var dateTime = year + "-" + month + "-" + day;
            return dateTime; 
        },
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
.faddContractFooter{
    position: fixed;
    left:0;
    bottom:0;
    width:100%;
    height: 40px;
    display: flex;
    flex: 1
}
.leftBtn4addContract{
    line-height: 40px;
    width:100%;
    text-align: center;
    background-color: #07c160;
    color:white;
}
.rightBtn4addContract{
    line-height: 40px;
    width:50%;
    text-align: center;
    background-color: #1989fa;
    color:white;  
}
.fw{
    font-weight: 700
}
</style>
